<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3 你好世界</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <p>{{setupMessage }}</p>
        <button @click="print">打印</button>
    </div>

    <script>
       
        var Counter = {
            data(){
                return{
                    msg:"你好世界",
                    count:0
                }
            },
            //外部提供的api直接注入，供自己使用
            setup(){
                let func = function(){
                    console.log("setup生命周期钩子函数");
                };
                Vue.onMounted(func);
                return{
                    setupMessage:Vue.ref("setup数据"),
                    print(){
                        console.log(111);
                    }
                }
            }, 
        }
        
        const app = Vue.createApp(Counter);
        const vm = app.mount('#app');
    </script>
</body>
</html>